<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件展示</title>
    <link rel="stylesheet" href="css/xcode.css">
    <style>
        body,html{
            width: 1380px;
            height: 720px;
            margin: 0;
            padding: 20px;
            position: relative;
        }
    </style>
    <script src="js/highlight.pack.js"></script>
</head>

<body bgcolor="transparent" id="bg"  class="absolute" style="width:1380px;position:absolute;left:0;height:720px;overflow: hidden;background-image: url(images/bg.png) ;background-repeat: no-repeat;background-size: cover; ">
<script src="config/config.js"></script>
<script src="js/leadingtvComponent-6-test.js"></script>
<script src="js/cmsRequest.js"></script>
<script src="js/beautify.js"></script>
<script src="js/beautify-html.js"></script>
<script src="dist/component.js"></script>
<script src="js/componentList.js"></script>

<!--<script src="js/util.js"></script>-->
<!--<script src="js/base.js"></script>-->

<!--<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>-->

<!--<script>hljs.initHighlightingOnLoad();</script>-->
<script>

    var leftTabx = tvImport("./component/topMenu.vue");
    var right = tvImport("./component/containner.vue",{"left":151});

    leftTab = new FocusTables(leftTabx,{
        left:20,
        top:0,
        width:131,
        height:720,
        color:"#000000",
        "background":"#ffffff",
        listItem:{
            "row":100,
            "col":1,
            "width":131,
            "height":40,
            "space_top":20,
            "padding_top":100
        },
        create:function(){
            this.itemGetFocus();
            this.doSelect();
        },
        data:componentList,
        enter:function (item) {

            if(item.code == "" ){
                item.code  = js_beautify(JSON.stringify(item.component));
            }
            rightContainner.setData( [new FocusTables(item.component,{code:item.code})]);
        }
    });
    rightContainner = new FocusTables(right,{
        updated:function () {
            console.log(this.data);
            setTimeout(function () {
                hljs.highlightBlock($("code"));
            },100)
        }
    });
    var oparateObj = new FocusTables({
        data:[leftTab,rightContainner],
        name:"page",
        focusChange:function(item,last_item){
            last_item.itemLoseFocus();
            item.itemGetFocus();
        },
        enter:function (item) {

            item.doSelect();
        }
    });

    function callClick(obj) {
        console.log(obj);
    }

    function init(){
        oparateObj.pageInit()
    }
    var grabEvent = oparateObj.grabEvent;
    document.onkeydown = oparateObj.grabEvent;
    // document.onkeypress = oparateObj.grabEvent;
    document.onirkeypress = oparateObj.grabEvent;
    document.onsystemevent = oparateObj.grabEvent;
    window.onload = init;
    window.onunload = function () {

    }

</script>

</body>
</html>